<script lang="ts">
export default {
  name: 'kaoshi1'
}
</script>
<script lang="ts" setup>
import { ref } from 'vue'

const Counter = ref(0)

const Increment = () => {
  Counter.value++
}

const Decrement = () => {
  Counter.value--
}
</script>
<template>
  <div>
    <div class="counter">
      <h2>Counter: {{ Counter }}</h2>
      <button @click="Increment()">Increment</button>
      <button @click="Decrement()">Decrement</button>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.counter {
  text-align: center;
}

button {
  margin: 5px;
  padding: 10px;
  background-color: #4caf50;
  color: white;
  border: none;
  cursor: pointer;
}

button:hover {
  background-color: #45a049;
}
</style>
